<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        style="position: relative"
        class="dst"
        v-for="item in list"
        :key="item"
        :title="item"
      >
        <div class="dsp">
          <span class="dsp1">10:00</span>&nbsp;&nbsp;&nbsp;<span class="dsp2"
            >今天</span
          >
        </div>
        <van-card title="明日之战" thumb="/img/1.jpg" />
        <van-rate
          count="4"
          size="10"
          v-model="value"
          :disabled="true"
          disabled-color="rgb(255, 69, 0)"
        />
        <p class="dy">导演：杜英</p>
        <p class="zy">主演：蒋春冬 任姚</p>
        <van-button type="danger">预定</van-button>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: 4,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 4; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
::v-deep .dst {
  background-color: #edf3f3;
}

::v-deep .van-tab {
  font-size: 18px;
  color: #9b89e1;
}
::v-deep .van-image__img {
  width: 65px;
}

::v-deep .dsp {
  margin: 0px 0px -6px 12px;
}
::v-deep .dsp1 {
  font-size: 20px;
  font-weight: bold;
  color: #9b89e1;
}
::v-deep .dsp2 {
  font-size: 10px;
  font-weight: bold;
  color: #9b89e1;
}

::v-deep .van-card {
  box-shadow: 0px 0.5px 3.5px #9e9e9e;
}

::v-deep .van-card__title {
  color: rgb(138, 43, 226);
  font-size: 15px;
  padding-top: 5px;
  margin-left: -15px;
  font-weight: bold;
  position: absolute;
}

::v-deep .van-rate {
  position: absolute;
  top: 57px;
  left: 99px;
}

::v-deep .dy {
  position: absolute;
  top: 80px;
  left: 95px;
  margin: 0;
  font-size: 10px;
}
::v-deep .zy {
  position: absolute;
  top: 100px;
  left: 95px;
  margin: 0;
  font-size: 10px;
}

::v-deep .van-button--normal {
  border-radius: 14px;
  height: 28px;
  width: 50px;
  padding: 10px;
  font-size: 10px;
  position: absolute;
  top: 80px;
  left: 310px;
  color: red;
  background-color: rgb(230, 201, 222);
  border: 1px solid rgb(230, 201, 222);
  box-shadow: 0.2px 0.2px 3px rgb(230, 201, 222);
}
</style>
